博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js 上下拖动显示ajax数据(自适应手机版)
阅读量:6571 次
发布时间:2019-06-24

本文共 7820 字,大约阅读时间需要 26 分钟。

1.common.js

var Dpr = 1, uAgent = window.navigator.userAgent;var isIOS = uAgent.match(/iphone/i);var isYIXIN = uAgent.match(/yixin/i);var is2345 = uAgent.match(/Mb2345/i);var ishaosou = uAgent.match(/mso_app/i);var isSogou = uAgent.match(/sogoumobilebrowser/ig);var isLiebao = uAgent.match(/liebaofast/i);var isGnbr = uAgent.match(/GNBR/i);function resizeRoot() {    var wWidth = (screen.width > 0) ? (window.innerWidth >= screen.width || window.innerWidth == 0) ? screen.width : window.innerWidth : window.innerWidth, wDpr, wFsize;    var wHeight = (screen.height > 0) ? (window.innerHeight >= screen.height || window.innerHeight == 0) ? screen.height : window.innerHeight : window.innerHeight;    if (window.devicePixelRatio) {        wDpr = window.devicePixelRatio;    } else {        wDpr = isIOS ? wWidth > 818 ? 3 : wWidth > 480 ? 2 : 1 : 1;    }    if (isIOS) {        wWidth = screen.width;        wHeight = screen.height;    }    // if(window.orientation==90||window.orientation==-90){    //     wWidth = wHeight;    // }else if((window.orientation==180||window.orientation==0)){    // }    if (wWidth > wHeight) {        wWidth = wHeight;    }    wFsize = wWidth > 1080 ? 144 : wWidth / 7.5;    wFsize = wFsize > 32 ? wFsize : 32;    window.screenWidth_ = wWidth;    if (isYIXIN || is2345 || ishaosou || isSogou || isLiebao || isGnbr) {//YIXIN 和 2345 这里有个刚调用系统浏览器时候的bug,需要一点延迟来获取        setTimeout(function () {            wWidth = (screen.width > 0) ? (window.innerWidth >= screen.width || window.innerWidth == 0) ? screen.width : window.innerWidth : window.innerWidth;            wHeight = (screen.height > 0) ? (window.innerHeight >= screen.height || window.innerHeight == 0) ? screen.height : window.innerHeight : window.innerHeight;            wFsize = wWidth > 1080 ? 144 : wWidth / 7.5;            wFsize = wFsize > 32 ? wFsize : 32;            // document.getElementsByTagName('html')[0].dataset.dpr = wDpr;            document.getElementsByTagName('html')[0].style.fontSize = wFsize + 'px';        }, 500);    } else {        // document.getElementsByTagName('html')[0].dataset.dpr = wDpr;        document.getElementsByTagName('html')[0].style.fontSize = wFsize + 'px';    }    // alert("fz="+wFsize+";dpr="+window.devicePixelRatio+";UA="+uAgent+";width="+wWidth+";sw="+screen.width+";wiw="+window.innerWidth+";wsw="+window.screen.width+window.screen.availWidth);}resizeRoot();var commonObj = {    ajaxUrl: "", //模糊搜索url    moreUrl: "", //下拉分页更多的url    searchUrl: "",    ajaxstatus: true,    fenyestatus: true,    pageData: {}, //下拉分页传输的data    appendId: "", //下拉分页append的父级ID    mohuSearch: function () {        var _this = this;        //搜索弹框        $(".opensearchbar").on("touchend", function () {            $("body").css({height: "100%", overflow: "hidden"});            $(".searchdialog").show();            $("#m_searchinput").focus();        })        //搜索关闭        $(".l_backbtn").on("click", function () {            $("body").removeAttr("style");            $(this).parent().hide();            //搜索清空逻辑            $("#m_searchinput").val("").blur();        })        //搜索按钮        $(".searchdialog").on("click", ".mh_searchbtn", function () {            var keyword = $.trim($("#m_searchinput").val());            //搜索逻辑            window.location.href = commonObj.searchUrl + "?keyword=" + keyword;        })        if (document.getElementById('m_searchinput')) {            //搜索匹配            document.getElementById('m_searchinput').addEventListener('input', function (e) {                var keyword = e.target.value;                var searchResult = [];                if ($.trim(keyword) != "") {                    $.ajax({                        url: _this.ajaxUrl,                        type: "post",                        data: {keyword: keyword},                        dataType: "json",                        success: function (res) {                            var dataLength = res.data.data.length;                            if (dataLength > 0) {                                for (var i = 0; i < dataLength; i++) {                                    searchResult[i] = '' +                                            '
' + res.data.data[i].keyword + '
' + '
'; } $("#showmohulist").html(searchResult.join("")).show(); } else { $("#showmohulist").hide(); } } }) } else { $("#showmohulist").html("").show(); } }); } }, scrollNextPage: function () { var _this = this; // $(window).scroll(_this.scrollFn); $(window).on("touchmove", _this.scrollFn); }, scrollFn: function () { var clientHeight = $(window).height(); var wholeHeight = $(document).height(); var scrollTopHeight = $(window).scrollTop(); if (clientHeight + scrollTopHeight + 50 >= wholeHeight && commonObj.ajaxstatus) { if (commonObj.fenyestatus) { commonObj.ajaxstatus = false; $(".loaddiv").show(); $.ajax({ url: commonObj.moreUrl, type: "post", dataType: "json", data: commonObj.pageData, success: function (res) { commonObj.searchCallBack(res); } }) } else { return } } }, searchCallBack: function (obj) { }}

2.引用js

//下滑分页        var listObj = {            pagenumber: 2,            sDfsview: '
', initList: function () { commonObj.moreUrl = "/web/interchange/index";//设置下拉分页url commonObj.appendId = "goods_list"; //下滑分页数据 commonObj.pageData = { page: listObj.pagenumber, t: true }; //下滑分页回调函数 commonObj.searchCallBack = function (res) { console.log(res.data); console.log('hello'); $(".loaddiv").hide(); var dataLength = res.data.length; console.log(dataLength); if (dataLength > 0) { listObj.pagenumber++; commonObj.ajaxstatus = true; commonObj.pageData.page = listObj.pagenumber; var htmlArray = []; for (var i = 0; i < dataLength; i++) { htmlArray[i] = '
' +'
' +'
' +'

'+res.data[i].sGoodsName+'

' +'

'+res.data[i].sGoodDsc+'

' +'
' +'
' +'
'+res.data[i].sStock+'' +'
' +'
立即兑换
' +'
' +'
' +'
'; } $("#" + commonObj.appendId).append(htmlArray.join("")); } else { commonObj.fenyestatus = false } }; //下滑分页触发 commonObj.scrollNextPage(); } }; $(listObj.initList)

3.原理

js  ajax封装 及时调,及时渲染

转载地址:http://kdvjo.baihongyu.com/

你可能感兴趣的文章
求连续子数组的最大和
查看>>
C语言dos程序源代码分享(进制转换器)
查看>>
php项目中常用的log日志记录方法
查看>>
Android--实现点击一次返回键返回桌面而不是退出应用
查看>>
LogParser 导入MSSQL
查看>>
左侧固定导航栏
查看>>
linux安装go环境并编写第一个go程序
查看>>
解决:laravel出现Please provide a valid cache path.
查看>>
[JAVA] String常用方法
查看>>
oracle
查看>>
兼容IE浏览器样式的html上传文件控件
查看>>
直接插入排序
查看>>
ssh建立安全跳板机,方便外网登录内网机器
查看>>
fstab中mount错误导致不能启动
查看>>
OSPF转发地址深入解析
查看>>
SQLServer的Top功能
查看>>
CentOS之crontab
查看>>
Nginx-Access日志格式
查看>>
【在线研讨-现场文字】《敏捷开发用户故事分类与组织结构(二期-3)》2012-07-03...
查看>>
F5扩展Synthesis架构实现可靠的应用与互联网访问
查看>>